import './ProgramManagePage.css'
import { PageHeader } from 'antd'
import ManageTabs from '../ProgramManageComponents/ManageTabs'
import { ReactNode, useState } from 'react'
import ContentTable from '../ProgramManageComponents/ContentTable'
import ContentList from '../ProgramManageComponents/ContentList'

interface ContentItem {
  key: string // 当前item的key
  name: string // 名字
  type: string // 类型
  isBegin: boolean // 是否开始
  specifiedTime: string // 预期时间
  time: string // 已进行时间
  action: boolean //是否有操作
}

const ProgramManagePage = (props: any) => {
  const [index, setIndex] = useState(0)

  const manageTabData = props.listData.map(
    (item: {
      key: string
      nextkey: string[]
      icon: ReactNode
      selectIcon: ReactNode
      title: string
      state: number
      content: ContentItem[]
    }) => {
      return {
        key: item.key,
        nextkey: item.nextkey,
        icon: item.icon,
        selectIcon: item.selectIcon,
        title: item.title,
        state: item.state,
      }
    }
  )

  const leftTableData = props.listData.map(
    (item: { title: string; content: ContentItem[] }) => {
      return {
        title: item.title,
        content: item.content,
      }
    }
  )

  let concatData: any[] = []

  for (let i = 0; i < props.listData[index].nextkey.length; i++) {
    console.log(props.listData[index].nextkey[i])
    concatData = [
      ...concatData,
      props.listData[+props.listData[index].nextkey[i]].content,
    ]
  }

  console.log('dataR', JSON.stringify(concatData[0]))
  console.log('dataL', JSON.stringify(leftTableData[index].content))

  const getMsgFromMyPos = (value: any) => {
    console.log('getMsgFromMyPos', value)
  }

  const getMsgFromMyManageTabs = (value: any) => {
    console.log('getMsgFromMyManageTabs', value)
    console.log('index', value.index)
    setIndex(value.index)
  }

  return (
    <>
      <PageHeader title="项目管理" />
      <div
        style={{
          width: '100%',
          height: '100%',
          alignItems: 'center',
          display: 'flex',
          flexDirection: 'column',
        }}>
        <div style={{ marginTop: '20px' }}/>
        <div style={{ width: '90%' }}>
          <ManageTabs
            selectKey="1"
            myList={manageTabData}
            getMsgFromMyManageTabs={getMsgFromMyManageTabs}
          />
        </div>
      </div>
      <div className="steps-content">
        <div className="leftTable">
          <ContentTable
            content={leftTableData[index].content}
            title={leftTableData[index].title}
          />
        </div>
        <div className="rightList">
          <ContentList content={concatData[0]} />
        </div>
      </div>
    </>
  )
}

export default ProgramManagePage
